
<template>
 <div>
    <div class="head" >
    <van-row>
      <van-col span="5">
        <choice/>
      </van-col>
      <van-col span="14">
        <van-search shape="round" background="#ec6941" placeholder="景点、目的地、酒店、" />
      </van-col>
      <van-col span="5">
        <div class="icon1">
          <van-icon name="chat-o" class="icon2" />

          <van-icon name="hot-o" class="icon2" />
        </div>
      </van-col>
    </van-row>
    <div >
    <!-- <img src="../assets/img/6.1.png" class="img1" alt style="margin-top: 15px;width: 80%;   transform: translateX(-50%);
  position: relative;left: 50%;" /> -->
  <swipe style="margin-top: 20px;"/>
  
    </div>
    <div>
      <!-- <van-grid :column-num="4">
  <van-grid-item v-for="(i,j) in arr" :key="j" :icon="photo-o" :text="i.Code"/>
      </van-grid>-->

      <van-grid :border="false" :column-num="4" :gutter="8" style="margin-top: -40px;"> 
        <van-grid-item v-for="(i,j) in arr" :key="j">
          <span style="font-size:14px ;color:#ec6941">{{i.play}}</span>
          <div style="font-size:10px">{{i.Code}}</div>
        </van-grid-item>
      </van-grid>

      <van-grid :column-num="5">
        <van-grid-item
          v-for="(value,key) in play"
          :key="key"
          :icon="value.Code"
          :text="value.Name"
        />
      </van-grid>
    </div>
    <div style="padding-bottom:40px ;">
      <h3 style="margin-left: 10px;">热门活动</h3>
      <van-grid :column-num="2" :border="false" >
        <van-grid-item v-for="(z,k) in act" :key="k" >
         <router-link 
         to="/details"
         >
          <img src="../assets/img/img.png" alt style="width:100%;height:80%" />

          <!-- <img :src="z.img" alt=""> -->

          <div>{{z.place}}</div>
         </router-link>
          <div style="color:red">{{z.price}}</div>
        </van-grid-item>
      </van-grid>
    </div>

  <!-- position: fixed; -->
    <!-- <tabbar /> -->
  </div>
 </div>
</template>

<script>
import Vue from "vue";
import { Col, Row } from "vant";
import { Search } from "vant";
import { Icon } from "vant";
import { Grid, GridItem } from "vant";
import { Popup } from "vant";
import { Cell} from 'vant';
import { getCity, getArr, getPlay, getAct } from "../api";
import tabbar from "@/components/Tabbar.vue";
import choice from "@/components/choice.vue";
import swipe from "@/components/swipe.vue";
import {mapState,mapGetters,mapMutations} from 'vuex'
// import swipe from "@/views/swipe.vue";



Vue.use(Cell);
Vue.use(Popup);
Vue.use(Grid);
Vue.use(GridItem);
// Vue.use(DropdownMenu);
// Vue.use(DropdownItem);
Vue.use(Icon);
Vue.use(Search);
Vue.use(Col);
Vue.use(Row);

export default {
  components: {
    tabbar,choice,swipe
  },
  data() {
    return {
      citys: [],
      arr: [],
      play: [],
      act: [],
      lv1: 0,
      show: false,
      i:'北京'




    };
  },
  methods: {
    // ...mapshowPopup(['show']),
    showPopup() {
      this.show = true;
    },
    // showPopdown(n){
    //     this.show=false;
    //     this.i=n;
    //     this.$router.push({name:'first',params:{id:this.i}})
    // }
  },
  async created() {
    let res = await getCity();
    let res1 = await getArr();
    let res2 = await getPlay();
    let res3 = await getAct();
    this.arr = res1.data;
    this.play = res2.data;
    this.act = res3.data;
    this.citys = res.data;
  },
  // created(){
  //   let place=this.$route.i
  //   let url=`http://localhost:3000/citys?Name=${place}`
  //   axios.get(url).then(res)=>{
  //     this.
  //   }
  // }
};
</script>





<style scoped>
.head {
  height: 150px;
  /* border: 1px black solid; */
  padding-top: 10px;
  background: #ec6941;
  

}


/* .icon1{display: flex; */
/* justify-content: center; */
/* } */
.van-icon-chat-o::before {
  /* align-items: center; */
  margin-top: 20px;
  margin-right: 5px;
}
/* .op{
    display: flex;justify-content: flex-start;
  } */
.option {
  align-content: flex-start;
}

/* .menu {
  background: #ec6941;
} */
#nav {
  margin: 0;

  padding: 0;
}
</style>